/*
 * @Author: 韩富贵 hanxzi@163.com
 * @Date: 2022-08-17 19:09:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-12-11 14:12:52
 */
import React, { useState, useEffect, useRef } from 'react';
import ReactECharts from 'echarts-for-react';
import * as echarts from 'echarts';
import cloneDeep from 'lodash/cloneDeep';
import merge from 'lodash/merge';

const defaultSeries = {
  type: 'pie',
  cursor: 'default',
  // hoverAnimation: false,
  legendHoverLink: false,
  label: {
    show: false,
    position: 'center',
  },
  emphasis: {
    label: {
      show: false,
    },
  },
};

const Pie: React.FC<any> = (props) => {
  const { baseFontSize = 1 } = props;

  const defaultOption = {
    tooltip: {
      show: true,
    },
    textStyle: {
      fontFamily: '微软雅黑',
      fontSize: 2 * baseFontSize,
      fontWeight: 400,
    },
    legend: {
      show: false,
      textStyle: {
        color: '#FFFFFF',
      },
    },
    toolbox: {
      show: false,
    },
  };

  const [chartOption, setChartOption] = useState({});
  const { animate, series } = props;
  let timer = useRef<any>(null);

  // 自动播放动画循环
  const autoAownplay = (chart: any) => {
    if (animate == false) {
      return;
    }
    const mychart = chart;
    const dataLength = series[0].data.length;
    let dataIndex = 0;

    if (dataLength > 0) {
      const start = () => {
        timer.current = setInterval(function () {
          mychart.dispatchAction({
            type: 'hideTip',
            seriesIndex: 0,
            dataIndex: dataIndex,
          });
          // 显示提示框
          mychart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex,
          });
          // 取消高亮指定的数据图形
          mychart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: dataIndex === 0 ? dataLength - 1 : dataIndex - 1,
          });
          mychart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: dataIndex,
          });
          dataIndex++;
          if (dataIndex >= dataLength) {
            dataIndex = 0;
          }
        }, 2000);
      };

      start();
      mychart.on('mouseover', () => {
        clearInterval(timer.current);
        timer.current = () => { };
        mychart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: dataIndex,
        });
        mychart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: dataIndex === 0 ? dataLength - 1 : dataIndex - 1,
        });
        dataIndex = -1;
      });

      mychart.on('mouseout', () => {
        start();
      });
    }
  };

  const resolveData = () => {
    let series = [];
    let option: any = {};
    if (Array.isArray(props.series)) {
      series = props.series.map((item: any) => merge({}, defaultSeries, item));
    }
    const defaultOptionCopy = cloneDeep(defaultOption);
    option = merge({}, defaultOptionCopy, props.option);
    option.series = series;
    setChartOption(option);
  };

  const getOption = () => {
    return cloneDeep(chartOption);
  };

  useEffect(() => {
    resolveData();
    return () => {
      clearInterval(timer.current);
    };
  }, [props.loading]);

  useEffect(() => {
    return () => {
      clearInterval(timer.current);
    };
  }, []);
  return (
    <ReactECharts
      onChartReady={(chart) => autoAownplay(chart)}
      {...props}
      echarts={echarts}
      option={getOption()}

    />
  );
};

export default Pie;
